<template>
  <view class="app">
      <mineNavbar :styleData="styleData">
    <view class="search-bar">
      <input type="text" placeholder="查找岗位" />
    </view>
    <view class="bar-container">
      <view style="display:flex; gap:30rpx;">
        <view  v-for="(item, index) in barItems" :key="index" @click="toggleBarItem(index)"
             :class="{ 'bar-item': true, 'activity': item.isActivity, 'default': !item.isActivity }">
          <span>{{ item.text }}</span>
        </view>
      </view>
      <view class="bar-item" style="justify-self: end;background:#1E1E1E;color:white;" @click="addTo"><span>添加岗位</span></view>
    </view>

    <view v-for="(item, index) in jobItems" :key="index" class="job-item">
      <view class="job-item-header">
        <view class="job-type" :class="item.type.id !== 1 ? 'job-type-gig' : 'job-type-hourly'">
          <span>{{ item.type.title }}</span>
        </view>
        <span class="job-item-title">{{ item.title }}</span>
      </view>
      <view class="job-item-dateNamount">
        <span style="color: #999999; font-size: 26rpx">{{ item.date }}</span>
        <span>￥<span style="color:#FF9E24;font-size: 38rpx">{{ item.amount }}</span>/月</span>
      </view>
      <view class="job-item-recruitment">
        <view>
          <span>{{ item.recruitment.need }}</span>
          <span style="color: #999999;font-size: 26rpx;margin-top: -20rpx;">招聘人数</span>
        </view>
        <view>
          <span>{{ item.recruitment.total }}</span>
          <span style="color: #999999;font-size: 26rpx;margin-top: -20rpx;">申请人数</span>
        </view>
        <view>
          <span>{{ item.recruitment.pass }}</span>
          <span style="color: #999999;font-size: 26rpx;margin-top: -20rpx;">已录用人数</span>
        </view>
      </view>
      <view class="job-item-footer">
				<span
            :class="'job-item-status ' + (item.status.id === 1 ? 'recruiting' : 'stophiring')">{{ item.status.title }}</span>
        <view class="operation">
          <view class="button"><span>暂停</span></view>
          <view class="button"><span>编辑</span></view>
          <view class="button" @click="toPage"><span>查看申请</span></view>
        </view>
      </view>
    </view>
  </mineNavbar>
  </view>
</template>
<script>
export default {
  data() {
    return {
      styleData: {
        tabbarText: "岗位",
      },
      barItems: [{
        text: "招聘中",
        isActivity: true
      }, {
        text: "待启用",
        isActivity: false
      }],
      jobItems: [{
        title: "前台",
        type: {
          id: 1,
          title: "小时工兼职"
        },
        date: "2022.1.20",
        amount: '3200.00',
        recruitment: {
          need: 12,
          total: 168,
          pass: 12,
        },
        status: {
          id: 1,
          title: "招聘中"
        }
      },
        {
          title: "客房主管",
          type: {
            id: 2,
            title: "零工兼职"
          },
          date: "2022.1.20",
          amount: '3200.00',
          recruitment: {
            need: 12,
            total: 168,
            pass: 12,
          },
          status: {
            id: 2,
            title: "停止招聘"
          }
        },
        {
          title: "客房主管",
          type: {
            id: 2,
            title: "零工兼职"
          },
          date: "2022.1.20",
          amount: '3200.00',
          recruitment: {
            need: 12,
            total: 168,
            pass: 12,
          },
          status: {
            id: 1,
            title: "招聘中"
          }
        }
      ]
    };
  },
  methods: {
    toggleBarItem(index) {
      this.barItems[index].isActivity = !this.barItems[index].isActivity;
    },
    toPage(){
      uni.navigateTo({url :"/pages/detail/index"})
    },
    addTo(){
      uni.navigateTo({url:"/pages/post/publishPost"})
    },
  }

};
</script>

<style scoped>
.app {
  background-color: hsl(0, 0%, 98%);
  min-height: 100rpx;
}

.search-bar {
  background-color: #fff;
  padding: 0 1rpx;
}

.search-bar>input {
  background-color: #F8F8F8;
  padding: .5rpx 3rpx 0 0;
  background-image: url("data:image/svg+xml,%3Csvg t='1711695003507' class='icon' viewBox='0 0 1099 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1878' width='32' height='32'%3E%3Cpath d='M721.408 418.816c0 130.048-105.472 235.008-235.008 235.008s-235.008-105.472-235.008-235.008S356.352 183.808 486.4 183.808 721.408 289.28 721.408 418.816zM486.912 218.112c-111.616 0-202.752 90.112-202.752 201.216s90.624 201.216 202.752 201.216 202.752-90.112 202.752-201.216S598.528 218.112 486.912 218.112z' p-id='1879'%3E%3C/path%3E%3Cpath d='M846.848 780.288 822.272 802.304 628.224 590.848 651.776 566.784Z' p-id='1880'%3E%3C/path%3E%3C/svg%3E");
  background-position: 100% 0px;
  background-repeat: no-repeat;
}


.bar-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 1rpx;
  margin: 1rpx 0;

}

.bar-item {
  justify-content: center;
  display: flex;
  align-items: center;
  text-align: center;
  border-radius: 40rpx;
  padding: 1rpx 15rpx;
  height: 56rpx;
  width: 140rpx;
  margin: 45rpx 1rpx;
  font-size: 28rpx;
}

.bar-item.default {
  box-shadow: inset 0 0 1rpx 1rpx #EDEDED;
  background-color: #EDEDED;
  color: black;
}

.bar-item.activity {
  box-shadow: inset 0 0 1px 1px #FF9E24;
  background-color: #FF9E24;
  color: white;
}

.job-item {
  margin: 20rpx 0;
  padding: 1rpx;
  background: #fff;
}

.job-item>view {
  margin: 1rpx 0;
}

.job-item-header {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.job-item-title {
  height: 20rpx;
  font-size: 30rpx;
  color: #000000e0;
  font-weight: bold;
  display: flex;
  margin-top: -10rpx;
}

.job-type {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  border-radius: 10rpx;
  height: 50rpx;
  width: 160rpx;
  font-size: 25rpx;
}

.job-type-gig {
  background-color: #34A1FF;
}

.job-type-hourly {
  background-color: #F32763;
}

.job-item-dateNamount {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}

.job-item-recruitment {
  background-color: hsl(0, 0%, 98%);
  display: flex;
  justify-content: space-around;
  padding: 10rpx;
}

.job-item-recruitment>view {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 45rpx;
  font-weight: bold;
}

.job-item-recruitment>view>text:nth-child(2) {
  color: gray;
}

.job-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
}

.job-item-status {
  font-weight: 900;
}

.recruiting {
  color: #317ED0;
}

.stophiring {
  color: #F32763;
}

.job-item-footer>.operation {
  display: flex;
  gap: 10px;
}

.job-item-footer>.operation>.button {
  font-size: 12px;
  padding: 5rpx 30rpx;
  border: 1px solid #0000001f;
  border-radius: 45rpx;
  font-weight: 900;
  justify-content: center;
  display: flex;
  align-items: center;
  text-align: center;
  height: 50rpx;
  width: 98rpx;
}
</style>